Next 是一個比較偏向前端的全端框架，適合寫一些輕量、邏輯簡單的 API。如果把複雜的後端邏輯搬到 Next，應該還是可以實現，只是寫起來的難易度會比 Nest 這些專為後端而生的框架大許多。

建立 API 這件事解決了以往 CSR 的某些痛點，像是整合多方 api、確保機密資訊可以保留在 server、server-level 的 cache 等等，這些需要後端才能處理的項目。

大綱

• 建立 api
• 不可以撞 page
• 其他

建立 api

在 app router 中使用 route 這個保留字建立的檔案會成為一個 api endpoint。

建立 app/api/route.js 就會建立一個 endpoint 為 /api 的 api。

可以在 route 這個檔案內 export 所有 HTTP 有支援的 method。像是 GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS。

以建立一個 GET 及 POST api 為例：

// app/api/route.ts
export async function GET(request: Request) {}

export async function POST(request: Request) {}

不可以與 page 同一層

api route 與 page 這個 router segament 一樣，都會對路由造成影響。差別在訪問同一個網址，一個吐 UI 出來，一個會幫你處理邏輯。

為了區分這兩者，在 Next 中不可以把 route 與 page 放在同一層 folder 當中。

比較常見的做法是 route 會有一個專屬的資料夾拿來寫 api，像是會把所有 api route 放在 app/api 裡面，降低撞名的可能性。

cache

api route 的 cache 與 server component 差不多，會有以下限制：

• 只能 cache GET method
• 一樣可以透過 fetch 參數設定需不需要 cache、要保存多久
• 無法 cache 動態 function，像是會讀取到 request 的 header 這些不固定的值

其他

在 Next 提供了特別包裝過的 NextRequest 與 NextResponse 來處理 api。

還有各種後端 api 會需要用到的：動態 api、讀取 search query、使用 cookie、streaming 等等，更詳細的等使用到再看 官方文件 就好。

參考文章

• Next - Route Handlers
• Next - forms and mutations